/**
 * PhoneDialog
 */


/*
 *
 * 1.外部调入 ./components/Recognize/index  saveRecognizeProperty  上传数据
 *
 * */
import Validator from '../../../utils/validator/Validator';
 var CommonDialog = require("./CommonDialog");
 var React = require("react");
 var PhoneDialog = React.createClass({
    mixins: [CommonDialog],
    getInitialProps: function (){
        return {
            data: ""
        }
    },
    getInitialState: function (){
        return {
            isInvalid: true,
            phone: "",
            error: false,
        }
    },
    componentWillMount: function (){
        var phone = this.props.data;
        if(!phone) return false;
        this.setState({
            phone: phone,
            isInvalid: !phone.length
        });
    },
    componentDidMount: function(){
       this.bindEvent();
    },
    bindEvent: function(){
       var self = this;
       function keydown(e){
           var code = e.keyCode;
           var input = $(self.refs.phone).val();
            if (input.length >= 21 && code != 8){
                event.returnValue = false;
            }
       }
       $(self.refs.phone).keydown(keydown);
    },
    checkValidate: function (){
        var validator = Validator();
        validator.addRule($(this.refs.phone), [{
            validator: "empty",
            error: $._('tel number can not be empty')
        }, {
            validator: "phone",
            error: $._('Please enter a valid phone number')
        },{
           validator: "max",
           length:21,
           error:$._('Please enter a valid phone number')
        }]);

        var errors = validator.execute();
        this.setState({
            error: !!errors,
            errorTip: errors
        });
        return !errors;
    },
    handleOnChangePhone: function (e){
        var node = $(e.target), value = node.val();

        this.data = value;
        this.setState({
            phone: this.data,
            isInvalid: !this.data.length,
            error: !this.data.length
        });
    },
    handleOnSubmit: function (){
        if (this.checkValidate()){
            this.props.saveRecognizeProperty({
                phone: this.data
            });
            this.handleOnCloseDialog();
        }
    },
    hanleOnSavePhone: function (e){
        var node = $(e.target), value = node.val(), status = true;

        if (this.checkValidate()){
            this.data = value;
            status = false;
        }

        this.setState({
            isInvalid: status
        });
    },
    render: function (){
        var errorNode = '';
        var errorTip = this.state.errorTip || $._('Please enter a valid phone number');
        if (this.state.error){
            errorNode = <div className='dialog-error-tip'>{errorTip}</div>
        }
        return (
            <div className="dialog-wrap">
                <div className="dialog-overlay"></div>
                <dialog ref="dialog" style={this.rStyle} className="btg-modal widget-form">
                    <div className="btg-modal-content">
                        <div className="form-horizontal">
                            <div className="widget-form-title">
                                <label>{$._("Add tel phone")}</label>
                            </div>
                            <div className="form-group">
                                <span>{$._('Phone No')}</span>
                                <input onChange={this.handleOnChangePhone} onBlur={this.hanleOnSavePhone} ref="phone" type="text" className="form-control" value={ this.state.phone } />
                                {errorNode}
                            </div>
                            <div className="form-group buttons">
                                <button disabled={this.state.isInvalid} onClick={this.handleOnSubmit} type="button">{$._("Confirm")}</button>
                            </div>
                        </div>
                    </div>
                    <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
                </dialog>
            </div>
        )
    }
 });

 module.exports = PhoneDialog;
